<script setup>
  import { RouterLink, RouterView } from 'vue-router';
  import { reactive, computed, watch, ref, onMounted, useTemplateRef } from 'vue';
  import CardUsefWebs from '../components/CardUsefWebs.vue';
  import HTTPserver from '@/js/HTTPserver';
  import 添加 from '@/assets/icon/添加.svg';
  import userTool from '@/js/userTool';
  import utilTool from '@/js/utilTool';

  const usefWebs = ref();
  const newUsefWebs = ref({
    title: '',
    description: '',
    url: '',
    img: '',
    selectedFile: {},
  });
  HTTPserver.getUsefWebs(usefWebs);
  const isShowTable = ref(false);
  const imgInput = useTemplateRef('imgInput');

  function reset() {
    newUsefWebs.value.title = '';
    newUsefWebs.value.description = '';
    newUsefWebs.value.url = '';
    newUsefWebs.value.img = '';
    newUsefWebs.value.selectedFile = {};
    imgInput.value.value = '';
  }

  function openTable() {
    reset();
    isShowTable.value = true;
  }

  function closeTable() {
    reset();
    isShowTable.value = false;
  }

  const handleFileChange = event => {
    const file = event.target.files[0];
    if (file) {
      newUsefWebs.value.selectedFile = file;
    }
  };

  function callback() {
    closeTable();
    HTTPserver.getUsefWebs(usefWebs);
  }

  function addNew() {
    HTTPserver.addUsefWebs(newUsefWebs, callback);
  }

  const realUser = ref({
    id: '',
    name: '访客',
    level: '0',
  });
  onMounted(() => {
    refresh();
  });
  function refresh(type) {
    if (utilTool.isEmpty(type)) {
      userTool.getUserInfo(realUser);
    } else {
      realUser.value.id = '';
      realUser.value.name = '访客';
      realUser.value.level = '0';
    }
  }
  defineExpose({
    refresh,
  });
</script>

<template>
  <div>
    <div class="text_H2 margin_LT">实用网站</div>
    <div class="panel_N1">
      <CardUsefWebs
        v-for="(item, index) in usefWebs"
        :sort="item.sort"
        :title="item.title"
        :description="item.description"
        :url="item.url"
        :img="item.img"
        @callback="callback"
      ></CardUsefWebs>
      <div v-if="realUser.level >= 6" class="card_N2 color_white" @click="openTable">
        <div style="width: 100%; height: 60%">
          <img style="object-fit: contain" class="img" :src="添加" />
        </div>
        <div style="width: 100%; height: 40%; padding: 1rem">
          <div class="text_H4">添加</div>
          <div class="text_H5">添加一个新网站</div>
        </div>
      </div>
    </div>
  </div>

  <div class="screenShadow" v-show="isShowTable">
    <div class="table color_white">
      <div>
        <div class="text_H2" style="margin-top: 1%; margin-left: 93%; cursor: pointer" v-on:click="closeTable">×</div>
        <input
          class="input_N1 text_H6"
          style="margin-top: 8%; margin-left: 20%"
          v-model="newUsefWebs.title"
          placeholder="名称"
          maxlength="16"
        />
        <input
          class="input_N1 text_H6"
          style="margin-top: 5%; margin-left: 20%"
          v-model="newUsefWebs.description"
          placeholder="描述"
          maxlength="64"
        />
        <input
          class="input_N1 text_H6"
          style="margin-top: 5%; margin-left: 20%"
          v-model="newUsefWebs.url"
          placeholder="链接"
          maxlength="64"
        />
        <input
          class="input_N1 text_H6"
          ref="imgInput"
          style="margin-top: 5%; margin-left: 20%"
          type="file"
          @change="handleFileChange"
        />

        <button class="button_N4 text_H3" style="margin-top: 20%; margin-left: 20%" v-on:click="addNew">添加</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .table {
    position: fixed;
    height: 30rem;
    top: 6rem;
    left: 30vw;
    right: 30vw;
    z-index: 200;
    border-radius: 0.3rem;
  }
</style>
